<!-- eslint-disable vue/multi-word-component-names -->
<script setup>
import { onMounted, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import {GetNewsList,DeleteNews,isPublishNews} from '../../api/news'
import {
  Star,
  Delete,
  Search,
} from '@element-plus/icons-vue'
import { useRouter } from "vue-router";
const tableData =ref([])
const router=useRouter()
onMounted(()=>{
NewsListData()
})//是否发布
const NewsListData=async()=>{
     const res=await GetNewsList()
     console.log(res.data);
     tableData.value=res.data.data
}
//是否发布按钮
const isPublishNewsData=async(ispublish,id)=>{
    const res=await isPublishNews(ispublish,id)
    console.log(res.data);
    if(res.data.status==200){
    ElMessage({
         message:res.data.massage,
         type: 'success',
         })
}
}
const ispublishSwitch=(ispublish,id)=>{
    isPublishNewsData(ispublish,id)
}
//编辑新闻
const EditNews=(id)=>{
   router.push(`/newsadd?id=${id}`) 
} 
//删除新闻
const DeleteNewsData=(id)=>{
    ElMessageBox.confirm(
    '是否确定删除该新闻',
    '删除新闻',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
        const res=await DeleteNews(id)
        console.log(res.data);
        if(res.data.status==200){
        NewsListData()
        ElMessage({
        type: 'success',
        message:res.data.massage,
         })
        }else{
           ElMessage.error('删除失败')
        }
    })
    .catch(() => {})
}
//预览图片
const dialogVisible=ref(false)
const rowNews=ref()
const Preview=(row)=>{
    dialogVisible.value=true
    console.log(row);
    rowNews.value=row
}
</script>
<template>
    <div>
         <el-page-header icon="" content="新闻列表" title="新闻管理"></el-page-header>
           <el-card class="cardlist" style="max-width: 100%">
                <el-table :data="tableData" style="width: 100%" height="650">
                <el-table-column fixed prop="title" label="标题" width="300" />
                <el-table-column prop="cover" label="封面" width="250" >
                    <template #default="{row}">
                         <img :src="row.cover" alt="">
                    </template>
                </el-table-column>
                <el-table-column prop="category" label="分类" width="200" >
                    <template #default="{row}">
                         <el-tag type="info" v-if="row.category==1">最新动态</el-tag>
                         <el-tag type="info" v-if="row.category==2">典型案例</el-tag>
                         <el-tag type="info" v-if="row.category==3">最新公告</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="创捷时间" width="220" />
                <el-table-column prop="ispublish" label="是否发布" width="200" >
                    <template #default="{row}">
                         <el-switch v-model="row.ispublish" :inactive-value="0" :active-value="1" @change="ispublishSwitch(row.ispublish,row.id)"/>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="操作" width="300" >
                    <template #default="{row}">
                         <el-button type="success" :icon="Star" circle @click="EditNews(row.id)"/>
                         <el-button :icon="Search" circle @click="Preview(row)"/>
                         <el-button type="danger" :icon="Delete" circle @click="DeleteNewsData(row.id)"/>
                    </template>
                </el-table-column>
            </el-table>
           </el-card>
             <el-dialog
               v-model="dialogVisible"
               title="预览新闻"
               width="500"
               :before-close="handleClose"
             >
              <div class="row">
                <p>{{ rowNews.title}}</p>
                <span>{{ rowNews.date }}</span>
                <el-divider />
                <div class="content" v-html="rowNews.content"></div>
              </div>
             </el-dialog>
    </div>
</template>
<style lang="less" scoped>
.cardlist{
    margin-top: 30px;
}
img{
    height: 45px;
    width: 80px;
    object-fit: cover;
}
.row{
    p{
        margin: 0;
        font-size: 30px;
        color: #000000;
    }
    span{
        margin-left: 15px;
    }
    .content{
        margin-left: 10px;
    }
}
</style>